<template>
	<div class="chapter_resource">
		<div class="title">
			<svg-icon :icon-name="attachData.attrSuffixStr | fileTypeIcon" size="24"></svg-icon>
			<h2>{{ data.name }}</h2>
		</div>
		<template v-if="data.type === '6'">
			<simple-video-player ref="video" :src="attachData.videoUrl"></simple-video-player>
		</template>
		<template v-else-if="data.type === '7'"></template>
		<div class="attrs">
			<p>播放时长：{{ data.strategy || '0' }}分钟</p>
			<p>作者：{{ data.author }}</p>
		</div>
		<div class="button">
			<el-button type="text" @click="handleEditeData()">编辑</el-button>
			<el-button type="text" @click="handleDeleteData()">删除</el-button>
		</div>
	</div>
</template>

<script>
import { deleteKnowledge } from '@/api/course/sysKnowledge';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {};
	},
	computed: {
		attachData() {
			let attach = this.data.sysAttachment || {};
			let httpUrl = attach?.httpUrl?.replaceIP();
			return { ...attach, videoUrl: httpUrl };
		}
	},
	methods: {
		//修改视频
		handleEditeData() {
			if (!!this.$refs['video']) {
				this.$refs['video'].handleVideoStop();
			}
			this.$nextTick(() => {
				this.$parent.handleOpenDialog(this.data);
			});
		},

		//删除视频
		handleDeleteData() {
			let that = this;
			if (!!this.$refs['video']) {
				this.$refs['video'].handleVideoStop();
			}
			this.$confirm('此操作将永久删除该课程资源, 是否继续?', '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteKnowledgeRequest();
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除知识点请求
		async deleteKnowledgeRequest() {
			let result = await deleteKnowledge(this.data.id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除知识点成功');
				this.$parent.handleRefreshVideo();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.chapter_resource {
	overflow: hidden;
	border-radius: 4px;
	border: solid 1px #f2f6fc;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	.title {
		padding: 10px;
		border-bottom: solid 1px #ebeef5;
		.svg-icon {
			float: left;
			margin: 2px 10px 0 0;
		}
		h2 {
			font-size: 18px;
			line-height: 28px;
			word-break: break-all;
		}
	}
	.attrs {
		display: flex;
		flex-wrap: wrap;
		padding: 12px 0;
		color: #606266;
		line-height: 2em;
		p {
			padding: 0 12px;
			min-width: 50%;
			box-sizing: border-box;
		}
	}
	.button {
		display: flex;
		align-items: center;
		border-top: solid 1px #ebeef5;
		justify-content: space-between;
		width: 100%;
		.el-button {
			flex: 1;
			margin: 0;
			border-radius: 0;
			&:first-child {
				border-right: solid 1px #ebeef5;
			}
		}
	}
}
</style>
